import React, { useState,useEffect } from 'react'
import { Table } from 'antd'
import { Link } from "react-router-dom"
import {GetDoto} from '../../../../http/dutoApi'
import { useSelector } from 'react-redux'

export default function CollectionRecordsList(props) {
  const [selectedRowKeys, setSelectedRowKeys] = useState([])
  const [resdata, setResData] = useState([])

  const [pageSize,setPageSize] = useState('5')
  const [pageSizeNow,setPageSizeNow] = useState('1')
  // const [num,setnum] = useState(0)

  //获取redux全局数据
  const SearchData = useSelector((state)=>state.doto)

  const data = [];

  useEffect(()=>{
    const current = String(pageSizeNow)
    const pageSizes = String(pageSize)

    GetDoto(current,pageSizes)
    .then((res)=>{
      console.log('请求成功',res.data.data);
      if(SearchData.length){
        setResData(SearchData)
        console.log(111);
      }else{
        setResData(res.data.data)
        console.log(222);
      }
    })
    .catch((err)=>{
      console.log('请求失败',err);

    })
  },[SearchData])


  const columns = [
    {
      title: '催收编号',
      dataIndex: 'cuishouNumber',
    },
    {
      title: '客户姓名',
      dataIndex: 'CustomerName',
    },
    {
      title: '借款编号',
      dataIndex: 'CollectionNumber',
    },
    {
      title: '逾期天数',
      dataIndex: 'CollectionFeedback',
    },
    {
      title: '逾期本金',
      dataIndex: 'yuqibenjin',
    },
    {
      title: '逾期利息',
      dataIndex: 'yuqilixi',
    },
    {
      title: '风险分类',
      dataIndex: 'ReimbursementAmount',
    },
    {
      title: '催收方式',
      dataIndex: 'cuishouWays',
    },
    {
      title: '催收日期',
      dataIndex: 'cuishoudate',
    },
    {
      title: '催收反馈',
      dataIndex: 'cuishoufankui',
    },
    {
      title: '还款金额',
      dataIndex: 'huankuanjine',
    },
    {
      title: '实际还款日期',
      dataIndex: 'shijihuankuanriqi',
    },
    {
      title: '操作',
      dataIndex: 'Operation',
    },
  ];

  for (let i = 0; i < resdata.length; i++) {
    // const data = resdata[i].collection_time.charAt(10)
    data.push({
      key:i,
      cuishouNumber:resdata[i].id,
      CustomerName: resdata[i].customer.name,
      CollectionNumber: resdata[i].loan_id,
      CollectionFeedback:resdata[i].overdue.overdue_day,
      yuqibenjin:resdata[i].overdue.overdue_money,
      yuqilixi:resdata[i].overdue.overdue_interest,
      ReimbursementAmount:resdata[i].collection_status,
      cuishouWays:resdata[i].collection_way,
      cuishoudate:resdata[i].collection_time.substring(0,10),
      cuishoufankui:resdata[i].collection_feedback,
      huankuanjine:resdata[i].collection_yhmoney,
      shijihuankuanriqi:'未知',
      Operation: <span><Link to={
        {
          pathname:'/home/collectionrecorddetails',
          id:i,
          name:'王五',
          state:'CollectionRecordsList',
          des:'催收记录详情'
        }
      }  
      ><p>查看</p></Link>
      </span>,
    });
  }

  const getPage =(pageSizeNow,pageSize)=>{
    console.log(pageSizeNow);
    console.log(pageSize);
    setPageSize(pageSize)
    setPageSizeNow(pageSizeNow)
  }



  const onSelectChange = selectedRowKeys => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    setSelectedRowKeys(selectedRowKeys)
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
    selections: [
      Table.SELECTION_ALL,
      Table.SELECTION_INVERT,
      Table.SELECTION_NONE,
      {
        key: 'odd',
        text: 'Select Odd Row',
        onSelect: changableRowKeys => {
          let newSelectedRowKeys = [];
          newSelectedRowKeys = changableRowKeys.filter((key, index) => {
            if (index % 2 !== 0) {
              return false;
            }
            return true;
          });
          setSelectedRowKeys(newSelectedRowKeys)
        },
      },
      {
        key: 'even',
        text: 'Select Even Row',
        onSelect: changableRowKeys => {
          let newSelectedRowKeys = [];
          newSelectedRowKeys = changableRowKeys.filter((key, index) => {
            if (index % 2 !== 0) {
              return true;
            }
            return false;
          });
          setSelectedRowKeys(newSelectedRowKeys)
        },
      },
    ],
  };


  return (
    <div>
        <Table rowSelection={rowSelection} columns={columns} dataSource={data} 
          pagination={
            {
              total:data.length,
              showSizeChanger:true,
              showQuickJumper:true,
              showTotal:total => `共${Math.ceil(total/pageSize)}页/${total}条数据`,
              pageSizeOptions:['10','20','30'],
              onChange:getPage,
            }
          }
          
          />
    </div>
    );
}
